import { useState, useEffect } from "react";
import { Image, Form, Input, Checkbox, Button, Row, Col,message } from "antd";
import "@/styles/onlineMessageLeave.css";

import BANNER5 from "assets/banner5.jpg";
import FHI03 from "assets/03_f0hi.jpg";

import { getAboutUs } from "@/utils/request/index";

function onlineMessageLeave() {
  const [aboutData, setAboutData] = useState({
    category: [],
  });

  function loadGetAboutUs() {
    getAboutUs().then((res) => {
      setAboutData({
        category: res.category,
      });
    });
  }

  useEffect(() => {
    loadGetAboutUs();
  }, []);

  function submitForm(e) {
    e.preventDefault();

    console.log("2323");
  }
  const [messageApi, contextHolder] = message.useMessage();
  const onFinish = (values) => {
    messageApi.open({
      type: 'success',
      content: '提交成功!',
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <>
      <div id="bannerShow">
        <a href="#">
          <Image src={BANNER5} alt="" />
        </a>
      </div>
      <div id="breadcrumb">
        <div className="container">
          <a href="index">首页</a>
          <span> >> </span>
          <a href="onlineMessageLeave">在线留言</a>
        </div>
      </div>
      <div id="select" className="container">
        <div className="title">
          <h1 className="chinese">在线留言</h1>
        </div>
        <div className="content clearfix">
          <div className="list">
            {aboutData.category.map((item, index) => {
              return (
                <a href="#" key={index}>
                  {item.label}
                </a>
              );
            })}
            <Image src={FHI03} alt="wqpl" />
          </div>
          <div className="online right">
            <Form
              layout="vertical"
              name="basic"
              labelCol={{
                span: 8,
              }}
              wrapperCol={{
                span: 16,
              }}
              style={{
                maxWidth: 600,
              }}
              initialValues={{
                username: "",
                tel: "",
                email: "",
                project: [],
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
              <Form.Item
                label="您的姓名"
                name="username"
                rules={[
                  {
                    required: true,
                    message: "请输入您的姓名!",
                  },
                ]}
              >
                <Input  placeholder="请输入您的姓名"/>
              </Form.Item>
              <Form.Item
                label="您的电话"
                name="tel"
                rules={[
                  {
                    required: true,
                    message: "请输入您的电话!",
                  },
                ]}
              >
                <Input placeholder="请输入您的电话" />
              </Form.Item>
              <Form.Item
                label="您的邮箱"
                name="email"
                rules={[
                  {
                    required: true,
                    message: "请输入您的邮箱!",
                  },
                ]}
              >
                <Input placeholder="请输入您的邮箱"/>
              </Form.Item>

              <Form.Item name="project" label="咨询项目">
                <Checkbox.Group>
                  <Row>
                    {aboutData.category.map((item, index) => {
                      return (
                        <Col key={index}>
                          <Checkbox value={item.value}>{item.label}</Checkbox>
                        </Col>
                      );
                    })}
                  </Row>
                </Checkbox.Group>
              </Form.Item>
              <Form.Item name="content" label="咨询内容">
                <Input.TextArea style={{ height: 120 }} allowClear placeholder="请输入咨询内容"/>
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </>
  );
}

export default onlineMessageLeave;
